<template>
  <div>
    <el-dialog
      class="container-form"
      v-model="createFormVisible"
      width="55%"
      append-to-body
      :show-close="false"
    >
      <template #header="{ close }">
        <div class="my-header">
          <el-icon
            @click="close"
            size="18"
          >
            <ele-Close />
          </el-icon>
        </div>
      </template>
      <div class="container-form-title">{{ $t("form.createForm.title") }}</div>
      <div class="container-form-upload">
        <el-link
          @click="uploadDialogVisible = true"
          :underline="false"
          type="primary"
        >
          <el-icon>
            <ele-Plus />
          </el-icon>
          {{ $t("form.createForm.uploadText") }}
        </el-link>
        <el-link
          :underline="false"
          class="ml20"
          type="success"
          @click="excelDialogVisible = true"
        >
          <i class="iconfont icon-file-excel"></i>
          {{ $t("form.createForm.excelImport") }}
        </el-link>
      </div>
      <div class="container-form-wrap">
        <div
          class="container-form-sort"
          @click="handleCreateForm(1)"
        >
          <div class="container-form-img">
            <img src="@/assets/images/form/ordinary.png" />
          </div>
          <h3>{{ $t("form.createForm.normalForm") }}</h3>
          <span>{{ $t("form.createForm.normalFormText") }}</span>
        </div>

        <div
          class="container-form-sort"
          @click="handleCreateForm(4)"
        >
          <div class="container-form-img"><img src="@/assets/images/form/exam.png" /></div>
          <h3>{{ $t("form.createForm.examForm") }}</h3>
          <span>{{ $t("form.createForm.examFormText") }}</span>
        </div>
        <div
          class="container-form-sort"
          @click="handleCreateForm(5)"
        >
          <div class="container-form-img"><img src="@/assets/images/form/markting.png" /></div>
          <h3>{{ $t("form.createForm.marketingForm") }}</h3>
          <span>{{ $t("form.createForm.marketingFormText") }}</span>
        </div>

        <div
          class="container-form-sort"
          @click="handleCreateForm(6)"
        >
          <el-badge value="Beta">
            <div class="container-form-img"><img src="@/assets/images/form/eval.svg" /></div>
          </el-badge>
          <h3>
            {{ $t("form.createForm.eval") }}
          </h3>
          <span>{{ $t("form.createForm.evalFormText") }}</span>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-model="uploadDialogVisible"
      :title="$t('form.createForm.importJson')"
      width="500"
      append-to-body
    >
      <el-upload
        class="upload-demo"
        drag
        accept=".json"
        :action="importJsonAction"
        multiple
        :headers="getUploadHeader()"
        :on-success="handleUploadSuccess"
      >
        <el-icon class="el-icon--upload"><ele-UploadFilled /></el-icon>
        <template #tip>
          <div class="el-upload__tip">{{ $t("form.createForm.importJsonText") }}</div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="uploadDialogVisible = false">
            {{ $t("common.cancel") }}
          </el-button>
        </div>
      </template>
    </el-dialog>
    <ExcelImport v-model:visible="excelDialogVisible" />
  </div>
</template>

<script setup lang="ts" name="createForm">
import { ref } from "vue";
import { createFormRequest } from "@/api/project/form";
import { useRouter } from "vue-router";
import { useFormInfo } from "@/stores/formInfo";
import { throttle } from "lodash-es";
import { baseUrl } from "@/utils/auth";
import { getUploadHeader } from "@/utils/uploadFile";
import ExcelImport from "./ExcelImport.vue";

const createFormVisible = ref<boolean>(false);
const formStore = useFormInfo();
const router = useRouter();

const uploadDialogVisible = ref(false);
const excelDialogVisible = ref(false);

const importJsonAction = baseUrl + "/form/template/importJson";

const defaultFormData: FormDataType = {
  description:
    "<p style='text-align: center;' data-mce-style='text-align: center;'>感谢您能抽出几分钟时间来参加本次表单填写，现在我们就马上开始吧！</p>",
  folderId: 0
};

interface FormDataType {
  description: string;
  name?: string;
  type?: number;
  folderId: number;
}

const props = defineProps({
  folderId: {
    type: Number,
    default: 0
  }
});

const createFormHandle = async (formData: FormDataType) => {
  createFormVisible.value = true;
  const res = await createFormRequest(formData);
  formStore.setBackRoute(router.currentRoute.value.path);
  await router.push({
    path: `/project/form/editor/index`,
    query: { key: res.data.formKey, active: "editor/index", type: formData.type }
  });
  createFormVisible.value = false;
};

const handleCreateForm = throttle(async (type: number) => {
  let typeName = "";
  switch (type) {
    case 1:
      typeName = "未命名问卷";
      break;
    case 2:
      typeName = "未命名流程";
      break;
    case 4:
      typeName = "未命名考试";
      break;
    case 6:
      typeName = "360评估";
      break;
    default:
      typeName = "问卷";
      break;
  }
  const examFormData: FormDataType = {
    ...defaultFormData,
    name: `<strong><span style="font-size: 24px;" >${typeName}</span></strong>`,
    type: type,
    folderId: props.folderId
  };
  await createFormHandle(examFormData);
}, 4000);

const showForm = () => {
  createFormVisible.value = true;
};

const handleUploadSuccess = (response: any) => {
  console.log("response", response);
  uploadDialogVisible.value = false;
  if (response.data) {
    const { formKey, type } = response.data;
    router.push({
      path: `/project/form/editor/index`,
      query: { key: formKey, active: "editor/index", type: type }
    });
  }
};

defineExpose({
  showForm
});
</script>

<style lang="scss">
.container-form {
  height: 570px;

  .el-dialog__header {
    border: none !important;
  }

  .container-form-title {
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-weight: 500;
    color: #3d3d3d;
  }
  .container-form-upload {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .container-form-wrap {
    overflow-x: auto;
    margin-top: 65px;
    display: flex;
    justify-content: space-evenly;
  }

  .container-form-sort:hover {
    box-sizing: border-box;
    border: 2px solid #4c4edb;
    box-shadow: 0 4px 10px 0px rgba(0, 0, 0, 0.3);
  }

  .container-form-sort {
    width: 189px;
    height: 240px;
    border-radius: 10px;
    background: #f2f3f8;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    cursor: pointer;
    border: 2px solid transparent;
    margin: 0 5px;
    text-align: center;

    .container-form-img {
      width: 120px;
      height: 120px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 90.68%;
        height: 68.53%;
        object-fit: contain;
      }
    }

    h3 {
      font-weight: 500;
      color: #3d3d3d;
      line-height: 30px;
    }

    span {
      width: 152px;
      padding: 0 6px;
      font-size: 11px;
      font-weight: normal;
      color: #79808b;
    }
  }
}
.my-header {
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  align-content: space-around;
  justify-content: flex-end;
}
</style>
